import channelAddHtml from '../../assets/partials/channel-edit.html'
import BootstrapDialog from 'bootstrap3-dialog';

$.editChannel = function editChannel(groupId) {

    if (groupId == undefined) {
        groupId = $('#tree-panel').find(".selected").attr("data-id");
    }

    if (groupId == undefined) {
    
        alert("请在左边分组栏选择一个分组");
        return;
    }

    $.dialog({
        title: "添加频道",
        size: BootstrapDialog.SIZE_WIDE,
        message: $("<div>").html(channelAddHtml),
        onshow: function(dialog) {
            let body = dialog.getModalBody()[0];
            let $tbody = $(body).find("tbody");

            $.myAjax({
                url: "channel/getChannelDetailList.do",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    groupId: groupId
                }),
                success: function(res) {
                    let channels = res.data;
                    let $trs = [];
                    if (channels.length > 0) {
                        for (let i = 0; i < channels.length; i++) {
                            let $actions = [];
                            $actions.push($("<i class='icon icon-del' data-id='" + channels[i].id + "'>"));
                            $actions.push($("<i class='icon icon-inlineOk' data-id='" + channels[i].id + "'>"));
                            if (i == channels.length - 1) {
                                $actions.push($("<i class='icon icon-add'>"));
                            }
                            let $tr = $("<tr data-id='" + channels[i].id + "'>").append(
                                $("<td>").append($("<input name='name' style='border: 1px solid #CFCFCF;width: 100%;'>").val(channels[i].name))
                            ).append(
                                $("<td>").append($("<input name='url' style='border: 1px solid #CFCFCF;width: 100%;'>").val(channels[i].url))
                            ).append(
                                $("<td>").append($("<input name='port' style='border: 1px solid #CFCFCF;width: 100%;'>").val(channels[i].port))
                            ).append(
                                $("<td>").append($actions)
                            );
                            $trs.push($tr);
                        }
                    } else {
                        let $tr = $("<tr>").append(
                            $("<td>").append($("<input name='name' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                        ).append(
                            $("<td>").append($("<input name='url' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                        ).append(
                            $("<td>").append($("<input name='port' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                        ).append(
                            $("<td>").append($("<i class='icon icon-add'>"))
                        );
                        $trs.push($tr);
                    }
                    $tbody.append($trs);
                }
            });

            $(body).on('click', ".icon-del", function() {
                let $icon = $(this);
                if ($(this).attr("data-id") == undefined) {
                    $icon.parent().parent().remove();
                    return;
                }
                let ids = [$(this).attr("data-id")];

                $.confirm({
                    title: "确定是否删除频道",
                    message: "确定是否删除频道",
                    confirm: function() {
                        $.myAjax({
                            url: "channel/delChannelDetail.do",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({
                                groupId: groupId,
                                ids: ids
                            }),
                            success: function(result) {
                                $icon.parent().parent().remove();
                                if ($tbody.find("tr").length == 0) {
                                    let $tr = $("<tr>").append(
                                        $("<td>").append($("<input name='name' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                                    ).append(
                                        $("<td>").append($("<input name='url' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                                    ).append(
                                        $("<td>").append($("<input name='port' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                                    ).append(
                                        $("<td>").append($("<i class='icon icon-add'>"))
                                    );
                                    $tbody.append($tr);
                                }
                            }
                        });
                    }
                });

            });

            $(body).on('click', ".icon-add", function() {
                let $td = $(this).parent();
                let $tbody = $td.parent().parent();
                $(this).removeClass("icon-add").addClass("icon-del");
                let $tr = $("<tr>").append(
                    $("<td>").append($("<input name='name' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                ).append(
                    $("<td>").append($("<input name='url' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                ).append(
                    $("<td>").append($("<input name='port' style='border: 1px solid #CFCFCF;width: 100%;'>"))
                ).append(
                    $("<td>").append($("<i class='icon icon-add'>"))
                );
                $tbody.append($tr);
            });

            $(body).on('click', ".icon-inlineOk", function() {
                let $icon = $(this);
                let id = $(this).attr("data-id");
                let $tr = $(this).parent().parent();
                let name = $tr.find("input[name='name']").val().trim();
                if (name == "") {
                    alert("频道名称不能为空")
                    return;
                }
                let url = $tr.find("input[name='url']").val().trim();
                if (url == "") {
                    alert("频道源名称不能为空")
                    return;
                }
                let port = $tr.find("input[name='port']").val().trim();
                if (port == "") {
                    alert("端口名称不能为空")
                    return;
                }
                $.myAjax({
                    url: "channel/editChannel.do",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        groupId: groupId,
                        id: id,
                        name: name,
                        url: url,
                        port: port
                    }),
                    success: function(res) {
                        alert("修改成功")
                    }
                });
            });
        },
        submit: function(dialog) {
            let body = dialog.getModalBody()[0];
            let $trs = $(body).find("tbody").find("tr");
            let channels = [];
            let isError = false;
            $.each($trs, function(index, item) {
                if ($(this).attr("data-id") == undefined) {
                    let $tds = $(item).find("td");
                    if ($(item).find("input[name='name']").val().trim() == "") {
                        isError = true;
                        alert("频道名称不能为空")
                        return;
                    }
                    if ($(item).find("input[name='url']").val().trim() == "") {
                        isError = true;
                        alert("频道源名称不能为空")
                        return;
                    }
                    if ($(item).find("input[name='port']").val().trim() == "") {
                        isError = true;
                        alert("端口名称不能为空")
                        return;
                    }
                    let channel = {
                        "name": $(item).find("input[name='name']").val(),
                        "url": $(item).find("input[name='url']").val(),
                        "port": $(item).find("input[name='port']").val()
                    }
                    channels.push(channel);
                }
            });
            if (isError) {
                return;
            }
            $.myAjax({
                url: "channel/addChannel.do",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    "groupId": groupId,
                    "channels": channels
                }),
                success: function(res) {
                    alert(res.data);
                    dialog.close();
                    var table = $(".table").DataTable();
                    table.draw();
                }
            });
        }
    });
}
